<template>
  <el-container class="homecontainer">
    <!-- 头部 -->
    <el-header>
      <span>管理后台</span>
      <!-- <div id="img" style="margin-left: 75%">
        <img :src="avatar" alt="" />
      </div> -->
      <!-- <span style="margin-left: 1%"> {{ username }}</span> -->
      <el-button type="info" @click="logout()" style="margin-left: 85%"
        >退出</el-button
      >
    </el-header>
    <!-- 主体 -->
    <el-container>
      <!-- 侧边菜单栏 -->
      <el-aside width="200px">
        <!-- unique-opened是否保持一个子菜单展开 -->
        <!-- router开启菜单路由  并以index为路由路径 -->
        <!-- active-text-color激活的颜色 -->
        <!-- <el-menu
          active-text-color="#ffd04b"
          background-color="#545c64"
          class="el-menu-vertical-demo"
          default-active="2"
          text-color="#fff"
          router
        >
          <el-sub-menu  v-for="menu in menus" :index="menu.path" :key="menu.name">
            <template #title>
              <el-icon><chat-dot-square /></el-icon>
              <span>{{menu.name}}</span>
            </template>

            <el-menu-item v-for="child in menu.children" :index="child.path" :key="child.name">{{child.name}}</el-menu-item>

          </el-sub-menu>
        </el-menu> -->

        <el-tree
          :data="menus"
          :props="defaultProps"
          @node-click="handleNodeClick"
        />
      </el-aside>

      <!-- 右主体 -->
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
export default {
  data() {
    return {
      menus: [],
      defaultProps: {
        label: "mname",
        children: "menuList",
      },
    };
  },
  created() {
    this.$http.get(`http://127.0.0.1/menu/tree`).then((res) => {
      this.menus = res.data.menuTree;
    });
  },
  methods: {
    handleNodeClick(obj) {
      if (obj.murl != ""&&obj.murl!=undefined) {
        this.$router.push({ path: `/${obj.murl}` });
      }
    },
  },
};
</script>

<style  scoped>
.el-header {
  display: flex;
  align-items: center;
  background-color: #5e5e5e;
}

.el-aside {
  background-color: #5e5e5e;
}
.el-menu {
  border-right: none;
}
.el-main {
  background-color: #e6e6e6;
}
.homecontainer {
  height: 100%;
}
#img {
  overflow: hidden;
  height: 50px;
  width: 50px;
  border-radius: 50%;
}
img {
  max-width: 100%;
}
</style>